<template>
  <view class="tree-container">
    <view class="tree-header-container" v-if="hasHeader">
      <text class="title">
        {{ tableCommonAttr_title }}
      </text>
      <template v-for="btnConfig in treeHeaderBtns" :key="btnConfig.key">
        <GdTooltip
          class="box-item"
          effect="dark"
          :content="btnConfig.label"
          placement="bottom"
          v-if="btnConfig.isShow"
        >
          <GdButton
            type="primary"
            :size="tableCommonAttr_size"
            style="margin-left: 10px"
            @click="
              btnConfig.onClick({
                metaKey: btnConfig.key,
                containerAttr: btnConfig.containerAttr,
                metaItem: btnConfig,
              })
            "
          >
            <GdIcon :icon-name="'plus'" :size="tableCommonAttr_size"></GdIcon>
          </GdButton>
        </GdTooltip>
      </template>
    </view>
    <view class="search-form-container" v-if="hasSearch">
      <GdInput
        v-model="treeSearchFormData[searchFormInputField]"
        :icon-config="{
          site: 'append',
          name: 'search',
          onClick: onClickSearch,
        }"
        :size="tableCommonAttr_size"
        :placeholder="tableCommonAttr?.searchConfig?.placeholder ?? ''"
      ></GdInput>
    </view>
    <ly-tree
      class="tree-content-container"
      ref="treeRef"
      :props="treeProps"
      :node-key="nodeKey"
      :lazy="lazy"
      :tree-data="lazy ? undefined : tableBodyData"
      :load="loadNode"
      :show-checkbox="tableCommonAttr_selectionType === 'Multi'"
      :show-radio="tableCommonAttr_selectionType === 'Single'"
      :expand-on-check-node="false"
      :expand-on-click-node="false"
      :default-checked-keys="defaultCheckedKeys"
      highlight-current
      @check="onCheck"
      @check-change="onCheckChange"
      @current-change="onCurrentChange"
    >
    </ly-tree>
    <GdContainerWithBtns
      v-model:is-show-container="isShowContainer"
      :class="{ 'less-item-form': metaItemList.length <= 5 }"
      :container-attr="containerAttr"
      :event-from-config="containerEventFromConfig"
      @do-operation="(params) => myEmits('do-operation', params)"
    >
      <SceneContainerForm
        :common-attr="{
          size: tableCommonAttr.size,
          style: containerAttr?.style ?? { 'max-height': '500px' },
        }"
        :meta-item-list="metaItemList"
        :meta-dynmic-config-list="dialogFormItemDynmicConfigList"
        :form-data="formData"
        :vm-template-config="vmTemplateConfig"
      ></SceneContainerForm>
    </GdContainerWithBtns>
  </view>
</template>
<script setup>
import LyTree from "@gd-accbuild-ui/ly-tree/ly-tree.vue";
import GdInput from "@gd-accbuild-ui/gd-ui/gd-input/gd-input.vue";
import GdButton from "@gd-accbuild-ui/gd-ui/gd-button/gd-button.vue";
import GdIcon from "@gd-accbuild-ui/gd-ui/gd-icon/gd-icon.vue";
import GdTooltip from "@gd-accbuild-ui/gd-ui/gd-tooltip/gd-tooltip.vue";
import SceneContainerForm from "@gd-accbuild-ui/scene-container/scene-container-form/scene-container-form.vue";
import GdContainerWithBtns from "@gd-accbuild-ui/gd-ui/gd-container-with-btns/gd-container-with-btns.vue";
import { computed } from "vue";
import { getToolBarConfig } from "./components/event-container";
// #ifdef H5
import useDoEventStrategy from "./components/useDoEventStrategy";
import useCustomizeTreeNode from "./components/useCustomizeTreeNode";
// #endif
import useTreeAttrs from "./components/useTreeAttrs";
import useTreeEvent from "./components/useTreeEvent";
const props = defineProps({
  defaultCheckedKeys: {
    type: Array,
    default: () => [],
  },
  treeSearchFormItemMetaList: {
    type: Array,
    default: () => [],
  },
  toolBarConfig: {
    type: Object,
  },
  operationBtnsConfig: {
    type: Object,
  },
  tableBodyData: {
    type: Array,
  },
  allBtnsEmitFormItemMetaConfig: {
    type: Object,
  },
  dialogFormItemDynmicConfigList: {
    type: Array,
  },
  /////
  tableCommonAttr: {
    type: Object,
    default: () => ({
      size: "default",
      treeTitle: "标题",
      nodeKey: "id",
      parentNodeKey: "parentId",
      labelField: "id",
      treeSelectionType: "none", // ["none", "Multi", "Single"]
      lazy: true,
      appendFieldsIntoSearchForm: [],
      fillFieldsIntoAddForm: [],
      treeNodeConfig: {},
      searchConfig: {
        hasSearch: true,
      },
      headerConfig: {
        hasHeader: true,
        title: "标题",
      },
    }),
  },
});
const {
  tableCommonAttrDefault,
  nodeKey,
  parentNodeKey,
  lazy,
  loadVmCode,
  treeNodeConfig,
  operationBtnsConfig,
  hasSearch,
  hasHeader,
  toolBarConfig,
  treeHeaderContainerHeight,
  treeSearchFormData,
  searchFormInputField,
  treeContentHeight,
  treeProps,
} = useTreeAttrs(props);
console.log(operationBtnsConfig,props,'树的项配置========')
const {
  isShowContainer,
  formData,
  metaItemList,
  containerAttr,
  containerEventFromConfig,
  treeRef,
  myEmits,
  crudServiceVmTemplateConfig,
} = useDoEventStrategy(nodeKey, parentNodeKey, props);
const tableCommonAttr_title = computed(() => {
  return (
    props.tableCommonAttr?.treeTitle ??
    props.tableCommonAttr?.headerConfig?.title ??
    tableCommonAttrDefault.treeTitle
  );
});
const tableCommonAttr_size = computed(() => {
  return props.tableCommonAttr?.size ?? tableCommonAttrDefault.size;
});
const tableCommonAttr_selectionType = computed(() => {
  return props.tableCommonAttr?.selectionType ?? "";
});
const vmTemplateConfig = computed(() => {
  return crudServiceVmTemplateConfig.tree;
});
const treeHeaderBtns = getToolBarConfig(toolBarConfig, myEmits);
const refreshMetaData = () => {
    //tableFormBoxRef.value.tableOperationMethods.refreshTableMetaData;
  };
defineExpose({
  treeHeaderBtns,
  treeRef,
});

useCustomizeTreeNode(myEmits, operationBtnsConfig, treeNodeConfig);

const emits = defineEmits([
  "scene-tree-current-change",
  "scene-tree-node-load",
]);

const { onCheck, onCheckChange, onCurrentChange, onClickSearch, loadNode } =
  useTreeEvent(
    props,
    nodeKey,
    parentNodeKey,
    crudServiceVmTemplateConfig,
    loadVmCode,
    treeProps,
    treeSearchFormData,
    searchFormInputField,
    treeRef,
    emits
  );
</script>
<style lang="scss" scoped>
.tree-container {
  //margin: 10px;
  margin: 0 !important;
  /* margin-left: 10px; */
  height: 100%;
  background-color: #fff;
}

.tree-header-container {
  text-align: center;
  height: v-bind(treeHeaderContainerHeight);
  line-height: v-bind(treeHeaderContainerHeight);
  /* display:flex;
  align-items: center;
  align-content: center;
  min-width:240px; */
}

.tree-header-container .title {
  font-size: 16px;
}

.search-form-container {
  padding: #{$--accbuild-child-container-gutter};
  height: #{$vxe-table-row-height-default};
}

.tree-container .search-form-container :deep(.el-input-group__append) {
  cursor: pointer;
}

.tree-content-container {
  height: v-bind(treeContentHeight);
  overflow-y: scroll;
  //padding: 0 0 0 10px; :deep(.ly-tree)
}
</style>
